<template>
  <Card>
    <Modal title="查看大图" v-model="visible" class-name="fl-image-modal">
      <img :src="imgUrl" v-if="visible" style="width: 100%">
    </Modal>
    <Form v-if="detail.applyName" :model="detail" :label-width="150" ref="detail" :rules="ruleValidate">
      <h3 class="form-tip">
        客户信息
      </h3>
      <Row>
        <i-col span="12">
          <FormItem label="客户姓名：" >
            <p>{{detail.applyName}}</p>
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="身份号码：">
            <p>{{detail.IDNumber}}</p>
          </FormItem>
        </i-col>
      </Row>
      <Row>
        <i-col span="12">
          <FormItem label="客户手机：">
            <p>{{detail.applyMobile}}</p>
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="渠道来源：" >
            <p v-if="detail.channelSrc === 1">寿险渠道</p>
            <p v-else-if="detail.channelSrc === 2">同行渠道</p>
            <p v-else-if="detail.channelSrc === 3">入围公司</p>
            <p v-else-if="detail.channelSrc === 4">其他渠道</p>
          </FormItem>
        </i-col>
      </Row>
      <Row>
        <FormItem label="征信资料：" >
          <img v-for="(item,index) in detail.picture"
               v-if="item"
               :key="index"
               :src="item"
               @click="handleView(item)"
               style="height: 80px;width: 120px;display: block;margin-right: 10px;" />
        </FormItem>
      </Row>
      <h3 class="form-tip" >
        其他信息
      </h3>
      <Row>
        <i-col span="12">
          <FormItem label="推荐人姓名：" >
            <p>{{detail.name}}</p>
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="状态：" prop="status">
            <Select style="width: 250px;" v-model="detail.status" placeholder="请选择变更类型" class="searchItem">
              <Option :value="1">已否决</Option>
              <Option :value="2">初审否决</Option>
              <Option :value="3">已放款</Option>
              <Option :value="4">申请中</Option>
              <Option :value="5">初审通过</Option>
            </Select>
          </FormItem>
        </i-col>
      </Row>
      <Row>
        <i-col span="12">
          <FormItem label="客户经理姓名：">
            <p>{{detail.managerName}}</p>
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="贷款金额：" prop="loanAmount">
            <Input style="width: 250px;" v-model="detail.loanAmount"/>
          </FormItem>
        </i-col>
      </Row>
      <Row>
        <i-col span="12">
          <FormItem label="经办人返佣：" prop="reward">
            <Input style="width: 250px;" :disabled="originalDetail.status === 3" v-model="detail.reward"/>
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="经办人上级返佣：" prop="leaderReward">
            <Input style="width: 250px;" :disabled="originalDetail.status === 3" v-model="detail.leaderReward"/>
          </FormItem>
        </i-col>
      </Row>
      <Row>
        <i-col span="12">
          <FormItem label="创建时间：" >
            <p>{{detail.createTime}}</p>
          </FormItem>
        </i-col>
      </Row>
      <FormItem>
        <Button type="primary" :loading="saveLoading" @click="save('detail')">保存</Button>
      </FormItem>
    </Form>
  </Card>
</template>

<script>
  import {
    getLoanApplicationDetail,
    editLoanApplication
  } from '@/api/user'

  export default {
    name: 'user_customer_detail',
    data () {
      return {
        originalDetail: {},
        detail: {},
        resDefault: [],
        ruleValidate: {
          nickname: [
            {required: true, message: '昵称不能为空', trigger: 'blur'}
          ],
          status: [
            {required: true, type:'number', message: '状态不能为空', trigger: 'blur'}
          ],
          age: [
            {required: true, type:'number', message: '年龄不能为空', trigger: 'blur'}
          ],
          occupation: [
            {required: true, message: '职业不能为空', trigger: 'blur'}
          ],
          autograph: [
            {required: true, message: '个人签名不能为空', trigger: 'blur'}
          ],
          parentId: [
            {required: true, type:'number', message: '上级用户编号不能为空', trigger: 'blur'}
          ]
        },
        saveLoading: false,
        visible: false
      }
    },
    methods: {
      getDetail() {
        getLoanApplicationDetail({
          id:this.$route.query.id,
          cid:this.$route.query.cid,
          adminId: this.$store.state.user.userType === 1?this.$store.state.user.userId:''
        }).then( data => {
          this.originalDetail = Object.assign({}, data)
          this.detail = data
        },error => {
          if (error === '您无权限') {
            this.$router.replace('401')
          }
        })
      },
      handleView() {
        this.imgUrl = arguments[0];
        this.visible = true;
      },
      save (name) {
        this.saveLoading = true
        this.$refs[name].validate((valid) => {
          if (valid) {
            editLoanApplication(this.detail).then(() => {
              this.$Message.success('修改成功');
              this.saveLoading = false;
              setTimeout(() => {
                this.$router.go(-1)
              }, 1500)
            }, () => {
              this.saveLoading = false
            })
          } else {
            this.$Message.error('修改失败');
            this.saveLoading = false
          }
        })
      }
    },
    mounted () {
      this.getDetail()
    }
  }
</script>

<style scoped>

</style>
